<template>

    <navBar />

    <div class="hanghang-box-0" style="width:100%;">
        <div style="display:flex; justify-content:center">
            <div class="container-2">
                <div class=" hanghang-bg" style="min-height: 886px;">
                    <div class="hanghang-content">
                        
                        <div class="hanghang-za">
                            <div class="hanghang-za-title">
                                书籍分类
                            </div>
                            <div class="hanghang-shupu-content">

                                <block v-for="(item, index) in categories" :key="index">
                                    <a>
                                        <li :class="{ active: activeId === item.id }" @click="handleCategoryClick(item.id)">
                                            {{item.title}}
                                        </li>
                                    </a>
                                </block>
                              
                                <div class="clearFloat">
                                </div>
                            </div>
                        </div>

                        <div class="clearFloat">
                        </div>
                        <common-list ref="commonListRef" />
                        <!-- <template> 显示不了数据
                            <common-list ref="commonListRef" />
                        </template> -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <view class="footer">
        <div class="hanghang-box">
            @行行：QQ：2338856113
        </div>
    </view>

</template>

<script setup>
    import { ref, reactive, provide, watch } from 'vue'
    import { useStore } from 'vuex'; // 引入 Vuex
    import { useRouter } from 'vue-router';
    import navBar from '@/pages/components/nav-bar.vue';
    import commonList from '@/pages/index/common-list.vue';
    const commonListRef = ref(null);
    const store = useStore();

    // // 监听 Vuex 中的 isSearch 状态变化
    // watch(
    //   () => store.state.isSearch,
    //   (newIsSearch) => {
    //         alert();
    //     if (newIsSearch && commonListRef.value) {
    //       // 调用子组件加载数据，传递搜索关键词
    //       commonListRef.value.getDataList({
    //         keyword: store.state.keyword
    //       });
    //     }
    //   }
    // );

    const categories = ref([]);
    const listCategoryBook = () => { 
        http.request({
          url: '/categoryBook/listCategoryBook',
          method: 'GET',
        })
        .then(({ data }) => {
          categories.value = data
        })
        .catch(() => {
        })
    }

    onLoad((options) => {
        listCategoryBook();
    });

    // 共享的状态
    const activeId = ref(0)
    const categoryId = ref(0)
    const page = reactive({
      currentPage: 1,
      pageSize: 20,
      total: 0,
      pages: 0
    })
    // 提供给子组件
    provide('activeId', activeId)
    provide('categoryId', categoryId)
    provide('page', page)
    // provide('getDataList', getDataList)

    // const handleCategoryClick = (id) => {
    //   activeId.value = id
    //   page.currentPage = 1
    //   categoryId.value = id
    //   getDataList()
    // }

    const handleCategoryClick = (id) => {
        activeId.value = id;
        page.currentPage = 1;
        categoryId.value = id;
        // 调用子组件的 getDataList（通过 ref）
        commonListRef.value.getDataList(); 
      };
</script>

<style scoped lang="scss">
    @use './index.scss'; 

    /* 分页 start */
    .pagination-container {
      padding: 20rpx;
    }

    .data-item {
      padding: 24rpx;
      border-bottom: 1rpx solid #eee;
    }

    .custom-pagination {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 30rpx;
      padding: 20rpx 0;
      /*border-top: 1rpx solid #f0f0f0;*/
    }

    .page-info {
      margin-bottom: 15rpx;
      font-size: 26rpx;
      color: #000;
    }

    .page-jumper {
      display: flex;
      align-items: center;
      margin-top: 15rpx;
    }

    .page-input {
      width: 80rpx;
      height: 50rpx;
      margin: 0 10rpx;
      border: 1rpx solid #ddd;
      text-align: center;
      border-radius: 6rpx;
      background:#fff;
    }
    .btn-page-go {
        padding: 3px 20px;
    }

    .pagination-buttons {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 15rpx 0;
      gap: 20rpx;
    }

    .page-btn {
      padding: 8rpx 20rpx;
      border-radius: 8rpx;
      font-size: 28rpx;
      background-color: #f8f8f8;
      border: 1rpx solid #ddd;
      
      &[disabled] {
        opacity: 0.5;
        cursor: not-allowed;
      }
      
      &.prev-btn {
        margin-right: 20rpx;
      }
      
      &.next-btn {
        margin-left: 20rpx;
      }
    }
    /* 分页 end */

    .active {
        background-color: #c4b8b0;
        color: #fff;
    }
</style>